<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定时器弹框</title>
	<script type="text/javascript">
		
		// 表示延时弹框1秒，这里的单位是1ms
		// setTimeout(myalert,1000);
		
		window.onload = function(){
			var oPop = document.getElementById('pop');
			var oShut = document.getElementById('shutoff');

			// 也可以把整个showpop放入这里
			setTimeout(showpop,4000);

			function showpop(){

				oPop.style.display = 'block';
			}

			oShut.onclick = function(){

				oPop.style.display = 'none';
			} 

		}

		// function myalert(){
		// 	alert('hello!');
		// }
	</script>

	<style type="text/css">
		.pop_con{
			display: none;
		}
		.pop{
			width: 400px;
			height: 300px;
			background-color: #fff;
			border: 1px solid #000;

			/*这是固定定位*/
			position: fixed;
			left: 50%;
			top: 50%;
			margin-left: -200px;
			margin-top: -150px;

			z-index: 9999;
		}

		.mask{
			/*因为它是块元素，定位之后会成为行内块元素，而且没有内容，是撑不开容器的*/
			position: fixed;
			width: 100%;
			height: 100%;
			background-color: #000;
			left: 0;
			top:0;

			/*透明*/
			opacity: 0.3;
			filter: alpha(opacity=30);
			z-index: 9990;
		}
	</style>
</head>
<body>
	<h1>首页标题</h1>
	<p>页面内容</p>
	<div class="pop_con" id="pop">
		<div class="pop">
			<h3>提示信息！</h3>
			<a href="#" id="shutoff">关闭</a>
		</div>
		<div class="mask"></div>
	</div>
</body>
</html>